<!-- App.vue -->
<script setup>

</script>

<template>
  <div class="app">
    <router-view />
  </div>
</template>

<style>
.app {
  /* display: flex; */
  justify-content: center; /* 水平居中 */
  /* 去掉 min-height: 100vh，改用 auto 让高度随内容变化 */
  height: auto; 
  min-height: 100vh; /* 保留这行，确保内容过少时也占满屏幕（避免底部空白） */
  max-height: 100vh; /* 限制容器最大高度不超过屏幕 */
  overflow-y: auto; /* 只有内容超过 max-height 时才显示滚动条 */
  /* margin-left: 10%;
  margin-right: 10%;
  padding-top: 20px; */
  box-sizing: border-box; /* 关键！让 padding 不影响容器总高度 */
}
body {
  margin: 0;
  padding: 0; /* 顺手清除 padding（有些浏览器也有） */
}
</style>
